<div class="mx-auto max-w-6xl">
  <div class="mt-4 flex flex-wrap items-end justify-between gap-4">
    <div class="flex flex-wrap items-center gap-6">
      <div class="w-32 shrink-0">
        <img
          class="rounded-lg shadow"
          src={
            ~p"/api/images?url=#{@movie.poster}&token=#{@current_user.api_token.token}"
          }
          alt=""
        />
      </div>
      <div>
        <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
          <h1 class="text-2xl/8 font-semibold text-zinc-950 sm:text-xl/8 dark:text-white">
            <%= @movie.title %>
          </h1>
          <span class="inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline bg-yellow-400/20 text-yellow-700 group-data-[hover]:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-[hover]:bg-yellow-400/15">
            Movie
          </span>
        </div>
        <div class="mt-2 text-sm/6 text-zinc-500">
          Year <span aria-hidden="true">·</span> Studio
          <span aria-hidden="true">·</span> 100 minutes
        </div>
      </div>
    </div>
    <div class="flex gap-4">
      <.link
        id={"play-#{ @movie.id }"}
        navigate={"/watch?movie=#{@movie.id}"}
        class="relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText] border-transparent bg-[--btn-border] dark:bg-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5 after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay] dark:after:-inset-px dark:after:rounded-lg before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)] dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]"
      >
        Play
      </.link>
    </div>
  </div>

  <div class="mt-12">
    <h2 class="text-base/7 font-semibold text-zinc-950 sm:text-sm/6 dark:text-white">Summary</h2>
    <hr role="presentation" class="mt-4 w-full border-t border-zinc-950/10 dark:border-white/10" />
    <dl class="grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,theme(spacing.80))_auto] sm:text-sm/6">
      <dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5">
        Scores
      </dt>
      <dd class="pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none">
        <div class="flex gap-x-6">
          <span class="MovieDetails-rating-gwOHo">
            <span class="flex gap-x-1">
              <img
                class="TmdbRating-image-TmxGo"
                src=""
                style="height: 20px;"
              />79%
            </span>
          </span>
          <span class="MovieDetails-rating-gwOHo">
            <span class="flex gap-x-1">
              <img
                class="ImdbRating-image-EBG7Y"
                src=""
                style="height: 20px;"
              />8.1
            </span>
          </span>
          <span class="MovieDetails-rating-gwOHo">
            <span class="flex gap-x-1">
              <img
                class="RottenTomatoRating-image-HoF9G"
                src=""
                style="height: 20px;"
              />95%
            </span>
          </span>
        </div>
      </dd>
      <dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5">
        Studio
      </dt>
      <dd class="pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none">
        Studio
      </dd>
      <dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5">
        Rating
      </dt>
      <dd class="pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none">
        Rating
      </dd>
      <dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5">
        Overview
      </dt>
      <dd class="pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none">
        <%= @movie.overview %>
      </dd>
    </dl>
  </div>
</div>
